<template>
  <ElFormItem
    :label="titleText(options, item)"
    :prop="[childIndex, 'value']"
    :rules="{
      required: item.isRequired === 'Y',
      validator: validatorMessage,
      trigger: 'change',
    }"
    class="flex_column"
    placeholder="请填写"
  >
    <p v-if="options.showDesc" class="desc f12 mb10">
      {{ options.description }}
    </p>
    <ElInput
      v-model="item.value"
      :disabled="type === 'view' || options.disabled"
      :max="options.maxLength || 500"
      class="pc_w300"
      @change="change"
    />
  </ElFormItem>
</template>
<script setup>
import { titleText } from "@/utils/common.js";
import {
  chinese,
  decimal,
  email,
  idCard,
  letter,
  letterAndNumber,
  mobilePhone,
  noChinese,
  number,
  url,
} from "@/utils/validator.js";
import { ElFormItem, ElInput } from "element-plus";
import { } from "vue";

//defineOptions({ name: "PCCompanyName" });

const { item, type, check, childIndex } = defineProps([
  "item",
  "type",
  "check",
  "childIndex",
]);
const emits = defineEmits(["change"]);
const { options } = JSON.parse(item.vformJson);

// 传递值改变后
const change = () => {
  emits("change", item);
};
// 校验
const validatorMessage = (rule, value, callback) => {
  if (value) {
    let regs = {
      number,
      decimal,
      letter,
      letterAndNumber,
      mobilePhone,
      email,
      url,
      noChinese,
      chinese,
      idCard,
    };
    let hasReg = regs[options.validation];
    if (hasReg && !hasReg.test(value))
      callback(new Error(`请输入正确的${item.itemTitle}`));
  }
  if (item.isRequired === "Y") {
    let length = value ? value.length : 0;
    if (length === 0) {
      callback(new Error("请填写"));
    } else {
      if (options.minLength && length < options.minLength)
        callback(new Error(`字符长度不能少于${options.minLength}`));
      else if (options.maxLength && length > options.maxLength)
        callback(new Error(`字符长度不能大于${options.maxLength}`));
      else callback();
    }
  } else {
    callback();
  }
};
</script>